Hvatanje događaja u React Portalima: Presretanje događaja između portala

React Portali nude moćan mehanizam za renderiranje djece (children) u DOM čvor koji postoji izvan DOM hijerarhije roditeljske komponente. Ovo je posebno korisno za modale, opise alata (tooltips) i druge UI elemente koji trebaju pobjeći izvan okvira svojih roditeljskih spremnika. Međutim, to također uvodi složenosti pri rukovanju događajima, pogotovo kada trebate presresti ili uhvatiti događaje koji potječu iz portala, ali su namijenjeni elementima izvan njega. Ovaj članak istražuje te složenosti i pruža praktična rješenja za postizanje presretanja događaja između portala.

Razumijevanje React Portala

Prije nego što zaronimo u hvatanje događaja, uspostavimo čvrsto razumijevanje React Portala. Portal vam omogućuje renderiranje podređene komponente u drugi dio DOM-a. Zamislite da imate duboko ugniježđenu komponentu i želite renderirati modal izravno ispod `body` elementa. Bez portala, modal bi bio podložan stiliziranju i pozicioniranju svojih predaka, što bi potencijalno dovelo do problema s rasporedom. Portal to zaobilazi postavljanjem modala izravno tamo gdje ga želite.

Osnovna sintaksa za stvaranje portala je:

            ReactDOM.createPortal(child, domNode);
            

              
                Copy
              
            
          

Ovdje je `child` React element (ili komponenta) koju želite renderirati, a `domNode` je DOM čvor u koji ga želite renderirati.

Primjer:

            import React from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ children, isOpen, onClose }) => {
  if (!isOpen) return null;

  const modalRoot = document.getElementById('modal-root');
  if (!modalRoot) return null; // Handle case where modal-root doesn't exist

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    modalRoot
  );
};

export default Modal;
            

              
                Copy
              
            
          

U ovom primjeru, `Modal` komponenta renderira svoju djecu u DOM čvor s ID-jem `modal-root`. Rukovatelj `onClick` na `.modal-overlay` omogućuje zatvaranje modala klikom izvan sadržaja, dok `e.stopPropagation()` sprječava da klik na pozadinu zatvori modal kada se klikne na sadržaj.

Izazov rukovanja događajima između portala

Iako portali rješavaju probleme s rasporedom, uvode izazove pri rukovanju događajima. Konkretno, standardni mehanizam širenja događaja (event bubbling) u DOM-u može se ponašati neočekivano kada događaji potječu iz portala.

Scenarij: Razmotrimo scenarij u kojem imate gumb unutar portala i želite pratiti klikove na taj gumb iz komponente koja je više u React stablu (ali *izvan* lokacije renderiranja portala). Budući da portal prekida DOM hijerarhiju, događaj se možda neće proširiti do očekivane roditeljske komponente u React stablu.

Ključni problemi:

• Širenje događaja (Event Bubbling): Događaji se šire prema gore kroz DOM stablo, ali portal stvara prekid u tom stablu. Događaj se širi kroz DOM hijerarhiju *unutar* odredišnog čvora portala, ali ne nužno natrag do React komponente koja je stvorila portal.
• `stopPropagation()`: Iako koristan u mnogim slučajevima, neselektivno korištenje `stopPropagation()` može spriječiti da događaji dođu do potrebnih slušača, uključujući one izvan portala.
• Cilj događaja (Event Target): Svojstvo `event.target` i dalje pokazuje na DOM element gdje je događaj nastao, čak i ako se taj element nalazi unutar portala.

Strategije za presretanje događaja između portala

Može se primijeniti nekoliko strategija za rukovanje događajima koji potječu unutar portala i dolaze do komponenti izvan njih:

1. Delegiranje događaja (Event Delegation)

Delegiranje događaja uključuje postavljanje jednog slušača događaja (event listener) na roditeljski element (često dokument ili zajedničkog pretka) i zatim određivanje stvarnog cilja događaja. Ovaj pristup izbjegava postavljanje brojnih slušača događaja na pojedinačne elemente, poboljšavajući performanse i pojednostavljujući upravljanje događajima.

Kako funkcionira:

1. Postavite slušač događaja na zajedničkog pretka (npr. `document.body`).
2. U slušaču događaja provjerite svojstvo `event.target` kako biste identificirali element koji je pokrenuo događaj.
3. Izvršite željenu radnju na temelju cilja događaja.

Primjer:

            import React, { useEffect } from 'react';

const PortalAwareComponent = () => {
  useEffect(() => {
    const handleClick = (event) => {
      if (event.target.classList.contains('portal-button')) {
        console.log('Button inside portal clicked!', event.target);
        // Perform actions based on the clicked button
      }
    };

    document.body.addEventListener('click', handleClick);

    return () => {
      document.body.removeEventListener('click', handleClick);
    };
  }, []);

  return (
    <div>
      <p>This is a component outside the portal.</p>
    </div>
  );
};

export default PortalAwareComponent;
            

              
                Copy
              
            
          

U ovom primjeru, `PortalAwareComponent` postavlja slušač klika na `document.body`. Slušač provjerava ima li kliknuti element klasu `portal-button`. Ako ima, ispisuje poruku u konzolu i izvršava sve druge potrebne radnje. Ovaj pristup funkcionira bez obzira na to je li gumb unutar ili izvan portala.

Prednosti:

• Performanse: Smanjuje broj slušača događaja.
• Jednostavnost: Centralizira logiku rukovanja događajima.
• Fleksibilnost: Lako rukuje događajima s dinamički dodanih elemenata.

Razmatranja:

• Specifičnost: Zahtijeva pažljivo ciljanje izvora događaja koristeći `event.target` i potencijalno kretanje prema gore kroz DOM stablo koristeći `event.target.closest()`.
• Vrsta događaja: Najprikladnije za događaje koji se šire (bubble).

2. Odašiljanje prilagođenih događaja (Custom Events)

Prilagođeni događaji omogućuju vam da programski stvarate i odašiljete događaje. Ovo je korisno kada trebate komunicirati između komponenti koje nisu izravno povezane u React stablu ili kada trebate pokrenuti događaje na temelju prilagođene logike.

Kako funkcionira:

1. Stvorite novi `Event` objekt koristeći `Event` konstruktor.
2. Odašaljite događaj koristeći metodu `dispatchEvent` na DOM elementu.
3. Slušajte prilagođeni događaj koristeći `addEventListener`.

Primjer:

            import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';

const PortalContent = () => {
  const handleClick = () => {
    const customEvent = new CustomEvent('portalButtonClick', {
      detail: { message: 'Button clicked inside portal!' },
    });
    document.dispatchEvent(customEvent);
  };

  return (
    <button className="portal-button" onClick={handleClick}>
      Click me (inside portal)
    </button>
  );
};

const PortalAwareComponent = () => {
  useEffect(() => {
    const handlePortalButtonClick = (event) => {
      console.log(event.detail.message);
    };

    document.addEventListener('portalButtonClick', handlePortalButtonClick);

    return () => {
      document.removeEventListener('portalButtonClick', handlePortalButtonClick);
    };
  }, []);

  const modalRoot = document.getElementById('modal-root');

    return (
    <>
      <div>
        <p>This is a component outside the portal.</p>
      </div>
        {modalRoot && ReactDOM.createPortal(<PortalContent/>, modalRoot)}
    </
    >

  );
};

export default PortalAwareComponent;
            

              
                Copy
              
            
          

U ovom primjeru, kada se klikne gumb unutar portala, na `document` se odašilje prilagođeni događaj nazvan `portalButtonClick`. `PortalAwareComponent` sluša ovaj događaj i ispisuje poruku u konzolu.

Prednosti:

• Fleksibilnost: Omogućuje komunikaciju između komponenti bez obzira na njihov položaj u React stablu.
• Prilagodljivost: Možete uključiti prilagođene podatke u svojstvo `detail` događaja.
• Odvajanje (Decoupling): Smanjuje ovisnosti između komponenti.

Razmatranja:

• Imenovanje događaja: Odaberite jedinstvena i opisna imena događaja kako biste izbjegli sukobe.
• Serijalizacija podataka: Osigurajte da su svi podaci uključeni u svojstvo `detail` serijalizabilni.
• Globalni doseg: Događaji odaslani na `document` globalno su dostupni, što može biti i prednost i potencijalni nedostatak.

3. Korištenje Refova i izravne DOM manipulacije (Koristiti s oprezom)

Iako se općenito ne preporučuje u React razvoju, izravan pristup i manipulacija DOM-om pomoću refova ponekad može biti neophodna za složene scenarije rukovanja događajima. Međutim, ključno je minimizirati izravnu DOM manipulaciju i preferirati Reactov deklarativni pristup kad god je to moguće.

Kako funkcionira:

1. Stvorite ref koristeći `React.createRef()` ili `useRef()`.
2. Pridružite ref DOM elementu unutar portala.
3. Pristupite DOM elementu koristeći `ref.current`.
4. Postavite slušače događaja izravno na DOM element.

Primjer:

            import React, { useRef, useEffect } from 'react';
import ReactDOM from 'react-dom';

const PortalContent = () => {
  const buttonRef = useRef(null);

  useEffect(() => {
    const handleClick = () => {
      console.log('Button clicked (direct DOM manipulation)');
    };

    if (buttonRef.current) {
      buttonRef.current.addEventListener('click', handleClick);
    }

    return () => {
      if (buttonRef.current) {
        buttonRef.current.removeEventListener('click', handleClick);
      }
    };
  }, []);

  return (
    <button className="portal-button" ref={buttonRef}>
      Click me (inside portal)
    </button>
  );
};

const PortalAwareComponent = () => {
  const modalRoot = document.getElementById('modal-root');
  return (
    <>
      <div>
        <p>This is a component outside the portal.</p>
      </div>
      {modalRoot && ReactDOM.createPortal(<PortalContent/>, modalRoot)}
    </
    >
  );
};

export default PortalAwareComponent;

            

              
                Copy
              
            
          

U ovom primjeru, ref je pridružen gumbu unutar portala. Slušač događaja se zatim izravno postavlja na DOM element gumba koristeći `buttonRef.current.addEventListener()`. Ovaj pristup zaobilazi Reactov sustav događaja i pruža izravnu kontrolu nad rukovanjem događajima.

Prednosti:

• Izravna kontrola: Pruža preciznu kontrolu nad rukovanjem događajima.
• Zaobilaženje Reactovog sustava događaja: Može biti korisno u specifičnim slučajevima gdje Reactov sustav događaja nije dovoljan.

Razmatranja:

• Potencijal za konflikte: Može dovesti do sukoba s Reactovim sustavom događaja ako se ne koristi pažljivo.
• Složenost održavanja: Čini kod težim za održavanje i razumijevanje.
• Anti-uzorak (Anti-Pattern): Često se smatra anti-uzorkom u React razvoju. Koristite rijetko i samo kada je nužno.

4. Korištenje rješenja za upravljanje zajedničkim stanjem (npr. Redux, Zustand, Context API)

Ako komponente unutar i izvan portala trebaju dijeliti stanje i reagirati na iste događaje, rješenje za upravljanje zajedničkim stanjem može biti čist i učinkovit pristup.

Kako funkcionira:

1. Stvorite zajedničko stanje koristeći Redux, Zustand ili Reactov Context API.
2. Komponente unutar portala mogu odašiljati akcije ili ažurirati zajedničko stanje.
3. Komponente izvan portala mogu se pretplatiti na zajedničko stanje i reagirati na promjene.

Primjer (koristeći React Context API):

            import React, { createContext, useContext, useState } from 'react';
import ReactDOM from 'react-dom';

const EventContext = createContext(null);

const EventProvider = ({ children }) => {
  const [buttonClicked, setButtonClicked] = useState(false);

  const handleButtonClick = () => {
    setButtonClicked(true);
  };

  return (
    <EventContext.Provider value={{ buttonClicked, handleButtonClick }}>
      {children}
    </EventContext.Provider>
  );
};

const useEventContext = () => {
  const context = useContext(EventContext);
  if (!context) {
    throw new Error('useEventContext must be used within an EventProvider');
  }
  return context;
};

const PortalContent = () => {
  const { handleButtonClick } = useEventContext();

  return (
    <button className="portal-button" onClick={handleButtonClick}>
      Click me (inside portal)
    </button>
  );
};

const PortalAwareComponent = () => {
  const { buttonClicked } = useEventContext();
  const modalRoot = document.getElementById('modal-root');

  return (
    <>
      <div>
        <p>This is a component outside the portal. Button clicked: {buttonClicked ? 'Yes' : 'No'}</p>
      </div>
      {modalRoot && ReactDOM.createPortal(<PortalContent/>, modalRoot)}
    </
    >
  );
};

const App = () => (
  <EventProvider>
    <PortalAwareComponent />
  </EventProvider>
);

export default App;
            

              
                Copy
              
            
          

U ovom primjeru, `EventContext` pruža zajedničko stanje (`buttonClicked`) i rukovatelja (`handleButtonClick`). Komponenta `PortalContent` poziva `handleButtonClick` kada se gumb klikne, a komponenta `PortalAwareComponent` se pretplaćuje na stanje `buttonClicked` i ponovno se renderira kada se ono promijeni.

Prednosti:

• Centralizirano upravljanje stanjem: Pojednostavljuje upravljanje stanjem i komunikaciju između komponenti.
• Predvidljiv protok podataka: Pruža jasan i predvidljiv protok podataka.
• Testabilnost: Čini kod lakšim za testiranje.

Razmatranja:

• Dodatno opterećenje (Overhead): Dodavanje rješenja za upravljanje stanjem može uvesti dodatno opterećenje, posebno za jednostavne aplikacije.
• Krivulja učenja: Zahtijeva učenje i razumijevanje odabrane biblioteke ili API-ja za upravljanje stanjem.

Najbolje prakse za rukovanje događajima između portala

Kada se bavite rukovanjem događajima između portala, razmotrite sljedeće najbolje prakse:

• Smanjite izravnu DOM manipulaciju: Preferirajte Reactov deklarativni pristup kad god je to moguće. Izbjegavajte izravnu manipulaciju DOM-om osim ako je apsolutno nužno.
• Koristite delegiranje događaja mudro: Delegiranje događaja može biti moćan alat, ali pazite da pažljivo ciljate izvore događaja.
• Razmislite o prilagođenim događajima: Prilagođeni događaji mogu pružiti fleksibilan i odvojen način komunikacije između komponenti.
• Odaberite pravo rješenje za upravljanje stanjem: Ako komponente trebaju dijeliti stanje, odaberite rješenje za upravljanje stanjem koje odgovara složenosti vaše aplikacije.
• Temeljito testiranje: Temeljito testirajte svoju logiku rukovanja događajima kako biste osigurali da radi kako se očekuje u svim scenarijima. Posebnu pažnju obratite na rubne slučajeve i potencijalne sukobe s drugim slušačima događaja.
• Dokumentirajte svoj kod: Jasno dokumentirajte svoju logiku rukovanja događajima, posebno kada koristite složene tehnike ili izravnu DOM manipulaciju.

Zaključak

React Portali nude moćan način za upravljanje UI elementima koji trebaju pobjeći izvan granica svojih roditeljskih komponenti. Međutim, rukovanje događajima preko portala zahtijeva pažljivo razmatranje i primjenu odgovarajućih tehnika. Razumijevanjem izazova i primjenom strategija poput delegiranja događaja, prilagođenih događaja i upravljanja zajedničkim stanjem, možete učinkovito presresti i uhvatiti događaje koji potječu iz portala i osigurati da se vaša aplikacija ponaša kako se očekuje. Ne zaboravite dati prednost Reactovom deklarativnom pristupu i minimizirati izravnu DOM manipulaciju kako biste održali čist, održiv i testabilan kod.